<template>
  <div>
    <el-container>
      <el-aside width="280px">
        <div id="quyu">
          <span class="xiaozi cuda">A区001号:</span><br />
          <span class="xiaozi"> 2028-2-15  18:35:30 </span>
          <i class="el-icon-arrow-right"
             id="tubiao"></i><br />
          <span class="xiaozi">订单号：145454421544UP1544</span>
        </div>
      </el-aside>
        <el-container>
    
        <el-header >
        
用户名称：侯侯儿
&nbsp&nbsp&nbsp
人数：3人
&nbsp&nbsp&nbsp
服务员：1001
&nbsp&nbsp&nbsp
下单时长：5分钟
&nbsp&nbsp&nbsp
下桌时间：2028-2-15  18:35:30
        </el-header>
        <el-main>
          <el-table height="550px"
                    stripe
                    :data=tableData
                    style="width: 100%"
                    :border=true>
            <el-table-column prop="dishes"
                             label="菜品名称"
                             width=""
                             align='center'>
            </el-table-column>
            <el-table-column prop="bianhao"
                             label="菜品编号"
                             width=""
                             align='center'>
            </el-table-column>
            <el-table-column prop="yuanjia"
                             label="原价"
                             width=""
                             align='center'>
            </el-table-column>
            <el-table-column prop="shoujia"
                             label="售价"
                             width=""
                             align='center'>
            </el-table-column>
            <el-table-column prop="shuliang"
                             label="数量"
                             width=""
                             align='center'>
            </el-table-column>
            <el-table-column prop="tuicaishuliang"
                             label="退菜数量"
                             width=""
                             align='center'>

            </el-table-column>
             <el-table-column prop="kouwei"
                             label="口味/规格"
                             width=""
                             align='center'>

            </el-table-column>
           
          </el-table>
        </el-main>
 <el-footer>        
                  <div
                  class="clear"
                  style=" line-height:50px ;">
            <el-button type="primary"
                       style=""

          <div class="clear"
                       style="line-height: 50px">
              <el-button type="primary"
              @click="jiezhang"
                         style="
                width: 150px;
                height: 50px;
                float: right;
                margin-right: 71px;
                padding: 0;
              ">结账</el-button>
            
               </div>
  </div>
  </el-footer>
  </el-container>
  </el-container>
  <el-dialog
  title="确认结账？"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose"
  style="text-align: center">
  <span>总计：{{sum}}元</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

  </div>
  
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          dishes: "鱼香肉丝",
          bianhao: 19,
          yuanjia: 20,
          shoujia: 18,
          shuliang: 38,
          tuicaishuliang: 1,
          kouwei: "糖醋",
        },
        {
          dishes: "土豆丝",
          bianhao: 19,
          yuanjia: 20,
          shoujia: 13,
          shuliang: 38,
          tuicaishuliang: 0,
          kouwei: "酸辣",
        },
        {
          dishes: "毛血旺",
          bianhao: 19,
          yuanjia: 2,
          shoujia: 30,
          shuliang: 38,
          tuicaishuliang: 0,
          kouwei: "爆炸辣",
        },
        {
          dishes: "鱼香茄子",
          bianhao: 19,
          yuanjia: 2,
          shoujia: 20,
          shuliang: 38,
          tuicaishuliang: 0,
          kouwei: "酸辣",
        },
        {
          dishes: "青椒肉丝",
          bianhao: 19,
          yuanjia: 2,
          shoujia: 23,
          shuliang: 38,
          tuicaishuliang: 0,
          kouwei: "辣",
        },
      ],
      sum: "",
      fensum: "",
      dialogVisible: false,
    };
  },
  methods: {
    jiezhang() {
     this.dialogVisible = true
      this.sum = this.tableData.reduce((sum, e) => sum + e.shoujia, 0);
    },
  },
};
</script>
<style lang="less" scope>
.xiaozi {
  font-size: 13px;
}
.cuda {
  font-weight: 700;
}
#cebian div:nth-child(2) {
  padding-bottom: 3px;
  height: 80px;
}
#tubiao {
  margin-left: 60px;
  font-size: 30px;
  font-weight: 700;
}


#quyu {
  border-bottom: 1px solid rgb(223, 222, 222);
}
.el-header {
  border: 1px solid rgb(230, 229, 229);
  line-height: 58px;
  line-height: 60px;
  margin-left: 20px;
  border-right: none;
}
.gekai {
  margin: 110px;
}

.youge {
  margin: 0 125px 0 30px;
}
.clear {
  clear: both;
  content: "";
  display: block;
}
.bianhong {
  color: red;
}
.el-footer div span:nth-child(2) {
  margin-left: 20px;
}

.el-aside {
  border: 1px solid rgb(223, 222, 222);
  margin-top: -1px;
}
.sianniu {
  width: 280px;
  height: 100px;
  font-weight: 700;
}
#wangyou {
  margin-left: 1230px;
  border: none;
  padding-top: 10px;
}
</style>
